<template>
  <div>
    <div class="pngfix">
      <div>
        <div class="slider">
          <el-carousel interval="10000" arrow="always">
            <el-carousel-item v-for="item in imgs" :key="item.id">
              <img :src="item" alt style="height:300px;width:500px" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="detail">
          <div class="title">{{title}}</div>
          <i class="el-icon-location-information">地 址： {{location}}</i>
          <br />
          <i class="el-icon-edit-outline">评分： {{grade}}</i>
          <h3>简介</h3>
          <h4>{{brief}}</h4>
        </div>
      </div>
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-shopping-cart-2"></i>门票预订
          </span>
          <div v-for="(item,index) in tickets" :key="item.id">
            <p>名称：{{item.title}}</p>
            <p>ID: {{item.id}}</p>
            <p>备注：{{item.msg}}</p>
            <p>价格：{{item.price}}</p>
            <el-button type="success" @click="reservation_ticket(item.id,index)">{{item.is}}</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户评论">
          <h3>评论</h3>
          <Ckeditor></Ckeditor>
          <div v-for="(item) in comment" :key="item.id">
            <p>用户：{{item.user}}</p>
            <el-rate v-model="item.graded" disabled show-score text-color="#ff9900"></el-rate>
            <p>内容：{{item.msg}}</p>
            <p>时间：{{item.time}}</p>
          </div>
          <h3>分页</h3>
          <el-pagination
            :page-size="page_size"
            :total="total"
            :current-page="pageNum"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import ckeditor from "@/components/ckeditor";


export default {
  data() {
    return {
      PageID: null,
      brief: null,
      imgs: null,
      location: null,
      title: null,
      grade: null,
      tickets: [],
      comment: [],
      page_size: 15,
      page_size: 8,
      total: 0,
      pageNum: 1,
      text: null,
      graded: null,
      rateValue: null
    };
  },

  components: { ckeditor },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        this.upData(this.$route.query.id);
      },
      deep: true
    }
  },
  created: function() {
    this.upData(this.$route.query.id);
    this.upPage(1);
    // 判断是否预定这个门票

    // 拿到所有的门票

    // 请求是否预定
  },
  beforeMount: function() {
    console.log(this.tickets);
  },
  methods: {
    async upData(id) {
      var d = { id: id };

      await this.$api.sceneryAPI.get_scenery(d).then(res => {
        //景点信息
        this.brief = res.data.data.brief;
        this.imgs = res.data.data.imgs;
        this.location = res.data.data.location;
        this.title = res.data.data.title;
        this.grade = res.data.data.grade;
      });

      await this.$api.sceneryAPI.get_scenery_tickets(d).then(res => {
        //门票信息
        this.tickets = res.data.data;
      });

      for (let index = 0; index < this.tickets.length; index++) {
        var element = this.tickets[index];
        d = { id: element.id };
        
        var newObj = this.tickets[index];
        newObj.is = "登录后预定";
        this.$set(this.tickets, index, newObj);

        this.$api.orderAPI
          .get_ticketReserve(d)
          .then(res => {
            const is = res.data.data;
            var newObj = this.tickets[index];
            if (is == 0) {
              newObj.is = "预定";
            } else {
              newObj.is = "取消预定";
            }
            this.$set(this.tickets, index, newObj);
          })
          .catch(err => {});
      }
    },
    handleCurrentChange(page) {
      this.upPage(page);
    },
    upPage(page) {
      //获取评论
      var d = { id: this.$route.query.id, page: page, size: this.page_size };
      this.$api.commentAPI.get_comment(d).then(res => {
        this.total = res.data.data.count;

        this.comment = res.data.data.results;

        for (let index = 0; index < this.comment.length; index++) {
          this.comment[index]["graded"] = Number(this.comment[index]["graded"]);
        }
      });
    },
    reservation_ticket(id, index) {
      var d = { id: id };

      var newObj = this.tickets[index];
      newObj.is = "预定";
      this.$set(this.tickets, index, newObj);

      this.$api.orderAPI
        .post_ticketReserve(d)
        .then(res => {
          const data = res.data.data;
          var newObj = this.tickets[index];

          newObj.is = "预定";
          if (data == 1) {
            newObj.is = "取消预定";
          } else {
            newObj.is = "预定";
          }

          this.$set(this.tickets, index, newObj);
        })
        .catch(err => {});
    },
    commentClick() {
      var d = {
        sceneryId: this.$route.query.id,
        text: this.text,
        imgs: 1,
        graded: this.graded
      };
      console.log(this.graded);
      this.$api.commentAPI
        .post_comment(d)
        .then(res => {
          const results = res.data.data;
          this.comment.push(results);
        })
        .catch(err => {});

      // 2000
    }
  }
};
</script>

<style>
.ck-editor__editable {
  min-height: 300px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  line-width: 500px;
  margin: 0;
  transform: translateX(-10%);
  position: relative;
  height: 300px;
  width: 500px;
}
.title {
  font-size: 26px;
  color: #ff6600;
  font-family: "微软雅黑", Arial, sans-serif;
}

.el-carousel__arrow--right {
  right: 1000px;
}
.el-carousel__indicators--horizontal {
  bottom: 0;
  left: 16%;
}
div {
  display: block;
}
img {
  width: 100%;
}
</style>
